<template>
  <div class="safety">
    <h3>{{$t("configLazyLoad.ipConfig.title")}}</h3>
    <el-row class="safety-content" style="margin-bottom: 25px">
        <p class="layout-mart">{{$t("configLazyLoad.ipConfig.tip")}}</p>
        <p class="layout-mart">{{$t("configLazyLoad.ipConfig.tip1")}}</p>
        <p class="layout-mart">{{$t("configLazyLoad.ipConfig.tip2")}}</p>
        <p class="layout-mart">{{$t("configLazyLoad.ipConfig.tip3")}}</p>
        <p class="layout-mart">{{$t("configLazyLoad.ipConfig.tip4")}}</p>
        <p class="layout-mart">{{$t("configLazyLoad.ipConfig.tip5")}}</p>
        <p class="layout-mart">{{$t("configLazyLoad.ipConfig.tip6")}}</p>
        <div class="layout-mart">
            <el-form label-width="60px">
                <el-form-item :label="$t('configLazyLoad.ipConfig.limitLevel')">
                    <el-select v-model="imLimitLevel" :placeholder="$t('public.pleasePick')">
                        <el-option :label="$t('configLazyLoad.ipConfig.limitLevel1')" value="1"></el-option>
                        <el-option :label="$t('configLazyLoad.ipConfig.limitLevel2')" value="2"></el-option>
                        <el-option :label="$t('configLazyLoad.ipConfig.limitLevel3')" value="3"></el-option>
                        <el-option :label="$t('configLazyLoad.ipConfig.limitLevel4')" value="4"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <div class="layout-mart">
            <el-button type="primary" class="primary_btn" @click.native.prevent="submit">{{$t('public.save')}}</el-button>
        </div>
    </el-row>
  </div>
</template>

<script>
export default {
    data(){
        return{
            imLimitLevel: '1'
        }
    },
    methods:{
        fetchData(){
            let data = {}
            this.$store.dispatch('queryIpConfig', data).then((res) => {
            if (res && res.success) {
                this.imLimitLevel = String(res.imLimitLevel)
            } else {
            }
            })
        },
        submit(){
            let data = {imLimitLevel: Number(this.imLimitLevel)}
            this.$store.dispatch('updateImLimitLevel', data).then((res) => {
                if (res && res.success) {
                    this.$message.success(this.$t('monitor.saveSuccess'))
                    this.fetchData()
                } else {
                }
            })
        }
    },
    mounted(){
        this.fetchData()
    }

}
</script>

<style lang="stylus" scoped>
@import "../../../../assets/common.styl"
.safety
   height calc(100vh - 130px)
   padding 20px
   overflow auto
.safety-content
  margin-left 24px
  .layout-mart
    margin-top 14px
  p.layout-mart
    color $c-prompt
</style>
